/*
 * @Author: 高瑞寒 15932717091@163.com
 * @Date: 2022-05-06 11:16:21
 * @LastEditTime: 2022-05-07 18:09:41
 * @LastEditors: 高瑞寒 15932717091@163.com
 * @Description: 
 */
/* 
  Hook
  1. useState
  2. useEffect
  3. useRef
*/
import React from "react"
export default function UseState() {
  console.log("更新");
  // 第一个参数用于执行操作,第二个参数用于监听的值,返回值是卸载前的操作,比如清除定时器
  React.useEffect(() => {
    console.log('effect');
  }, [])
  const [count, setState] = React.useState(0)
  const add = () => {
    // 方式一
    // setState(count + 1)
    // 方式二
    setState(count => count + 1)
  }
  const inputRef = React.useRef()
  const showInputValue = () => {
    console.log(inputRef.current.value);
  }
  return (
    <div>
      当前数值:{count}
      <input type="text" ref={inputRef} />
      <button onClick={add}>+1</button>
      <button onClick={showInputValue}>输出值</button>
    </div>
  )
}
